<template>
    <div class="l-input" :class="{'l-input--suffix': showSuffix}">
        <input
        class="l-input__inner"
        :class="{'is-disabled': disabled}"
        :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
        :placeholder="placeholder"
        :name="name"
        :disabled="disabled"
        :value="value"
        @input="handleInput"
        >
        <span class="l-input__suffix">
            <i class="l-input__icon l-icon-circle-close" v-if="clearable && value" @click="clear"></i>
            <i class="l-input__icon l-icon-view"
            v-if="showPassword"
            @click="handlePassword"
            :class="{'l-icon-view-active': passwordVisible}"
            ></i>
        </span>
    </div>
</template>

<script>
export default {
  name: 'LInput',
  data () {
    return {
      // 用于控制是否显示密码框
      passwordVisible: false
    }
  },
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    name: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: [String, Number],
    clearable: {
      type: Boolean,
      default: false
    },
    showPassword: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    showSuffix () {
      return this.clearable || this.showPassword
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', e.target.value)
    },
    clear () {
      // 把内容清空
      this.$emit('input', '')
    },
    handlePassword () {
      // 不能直接修改父组件传进来的type属性，所以修改子组件自身的属性
      this.passwordVisible = !this.passwordVisible
    }
  }
}
</script>

<style lang="scss">
.l-input {
    width: 180%;
    position: relative;
    font-size: 14px;
    display: inline-block;
    .l-input__inner {
        -webkit-appearance: none;
        background-color:#fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #686266;
        display: inline-block;
        font-size: inherit;
        height:40px;
        line-height: 40px;
        outline: none;
        padding: e 15px;
        transition: border-color .25 cubic-bezier(.645,.045,.355,1);
        width: 100%;

        &:focus {
            outline: none;
            border-color: #489eff;
        }

        &.is-disabled {
            background-color: #f5f7fa;
            border-color: #e4e7ed;
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
}

.l-input--suffix {
    .l-input__inner {
        padding-right: 30px;
    }
    .l-input__suffix {
        position: absolute;
        height: 100%;
        right: 10px;
        top: 0;
        line-height: 40px;
        text-align: center;
        color: #c0c4cc;
        transition: all .3s;
        z-index: 900;
        i {
            color: #c0c4cc;
            font-size: 14px;
            cursor: pointer;
            transition: color .2s cubic-bezier(.645, .045, .355, 1);
        }

        .l-icon-view-active {
            color: blue;
        }
    }
}

</style>
